<template>
    <!-- 扫码验真伪 -->
    <view class="query_card">
        <view class="query_card_body">
            <view class="scan">
                <view class="btn zwyPortrait" style="--color:#E77817;" @tap="$Router.push('/pages/index/scan')">
                    <u-icon name="scan" color="#fff" size="100"></u-icon>
                    <view class="btn_text">扫码验真伪</view>
                </view>
            </view>
            <view class="tip-text">点击扫描包装盒上的二维码</view>
            <view class="search">
                <u-search
					placeholder="请输入防伪码"
					v-model="keyword"
					height="70"
					:clearabled="true"
					action-text="查询"
                    :action-style="searchStyle"
					@search="headleSearch"
					@custom="headleSearch">
				</u-search>
            </view>
            <button class="batch_button">批量查询</button>

            <view class="divide"></view>

            <view class="example">
                <view class="example-title">商品溯源样例</view>
                <view class="example-img">
                    <image src="" mode=""></image>
                </view>
            </view>
            <view class="example">
                <view class="example-title">管理员操作</view>
                <view class="btns u-flex u-row-center">
                    <button class="u-reset-button btn1" @tap="$Router.push('/pages/product/storage/index')">
                        <u-icon size="28" name="/static/images/btn1.png" class="icon"></u-icon>我要入库
                    </button>
                    <button class="u-reset-button btn2" @tap="$Router.push('/pages/product/outbound/index')">
                        <u-icon size="28" name="/static/images/btn2.png" class="icon"></u-icon>我要出库
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	/**
	 * 扫码验真伪
	 */
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				searchStyle: {
					'width': '140rpx',
					'color': '#fff',
					'font-size': '28rpx',
					'padding': '18rpx 0',
					'border-radius': '40rpx',
					'background': '#E77817'
				},
				keyword: '',
			};
		},
		methods: {
			// 单条搜索
			headleSearch(){
				if(this.keyword){
					this.$Router.push({path:'/pages/scan/results', query:{qrcode: this.keyword}})
				}else{
					this.$u.toast('请输入防伪码');
				}
			}
		}
	};
</script>

<style lang="scss">
	.query_card {
		position: relative;
		top: -80rpx;
		margin: 30rpx;
		width: calc(100% - 60rpx);
		border-radius: 20rpx;
		background-color: #Fff;

		.query_card_body {
			padding: 36rpx;

			.scan {
				width: 298rpx;
				height: 298rpx;
				border-radius: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
                margin: auto;
				.btn_text {
					color:#fff;
					font-size:24rpx;
					margin-top: 20rpx;
				}	
			}
		}
		.tip-text{
			color:rgba(33, 32, 30, .6);
			font-size: 28rpx;
			text-align: center;
			margin-top: 20rpx;
		}

        .search {
            padding: 6rpx;
            margin-top: 30rpx;
            border-radius: 40rpx;
            background-color: #F3F3F3;
        }
        .batch_button {
            color: #fff;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            border-radius: 40rpx;
            margin-top: 20rpx;
            background-color: #E77817;
        }
        .divide {
            position: relative;
            height: 2rpx;
            margin: 30rpx 0;
            background-color: rgba(33, 32, 30, .05);
            &::before,&::after {
                content: '';
                display: block;
                position: absolute;
                top: -16rpx;
                width: 32rpx;
                height: 32rpx;
                border-radius: 100%;
                justify-content: center;
                margin: auto;
				background-color: #F3F3F3;
            }
			&::before {
				left: -50rpx;
			}
			&::after {
				right: -50rpx;
			}
        }
        .btn {
            width: 240rpx;
            height: 240rpx;
            border-radius: 100%;
            background: #E77817;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            .btn_text {
                color: #fff;
                font-size: 24rpx;
                margin-top: 20rpx;
            }
        }


		.example {
			.example-title {
				text-align: center;
				color: #21201E;
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}

			.example-img {
				text-align: center;

				img {
					display: block;
					max-width: 100%;
					max-height: 100%;
					margin: auto;
				}
			}
		}


        .btns {
            gap: 20rpx;
            .btn1,.btn2 {
                flex: 1;
                color: #fff;
                font-size: 28rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 40rpx;
                .icon {
                    margin-right: 10rpx;
                    vertical-align: -2rpx;
                }
            }
            .btn1 {
                background-color: #E77817;
            }
            .btn2 {
                background-color: #F84141;
            }
        }
	}
</style>
</style>
